在昨天的範例中，我們完成了 Slider 的「上一個」以及「下一個」按紐，其中的三角型符號圖示是採用偽元素 (pseudo element) 的方式製作。

語法

CSS 的偽元素語法主要有兩種，兩個冒號 :: 加上 before 或 after。

• ::before
• ::after

因應瀏覽器向下相容 CSS 3 之前，尚未規範偽元素的情況，使用單一個冒號 : 也是可以的。

偽類 (pseudo class) 的語法是單一個冒號，因此，使用偽元素時，建議使用兩個冒號，以和偽類有所區別。

必要屬性

content: '';

必須加上 content 屬性，如果沒有打算顯示文字而是使用其它 CSS 屬性達成想要的效果，這個屬性留空白即可。

偽元素

::before

為了更好理解什麼是偽元素，我們把昨天的範例拉出來修改一下，只留下按紐的部分，其它移除。HTML 的原始碼如下。

【查看範例 9-1】

從原始碼的第 22 行，在 .previous 上建立 ::before 偽元素。

圖 a: 查看按紐的 ::before 偽元素

這個超大按紐中的三角型符號圖示，不是真的 HTML，而是 CSS 建立的偽元素。

從 Chrome 開發者工具中檢視原始碼，可以很清楚的看到，::before 在 <div> 中，位置在該 <div> 的內容文字「"上一個"」的前面。

在 .previous 上建立 ::before，並不是代表這個偽元素是在 .previous 這一個 DOM 之前產生，而是在「它的內容之前產生」。

::after

我們在這個按紐範例，為三角型圖示加上藍色的三角型疊在它的上方，讓這個黑色的三角型墊背，增加立體感。

【查看範例 9-2】

第 16 行：在 .previous 上建立 ::after 偽元素。
第 19 至 20 行：調整一個三角型的位置，些微地往左上方移動。
第 27 行：加上 z-index: 2，這是圖層順序，越高代表圖層越上面。預設值為 auto，等於是 0。

圖 b: 查看按紐的 ::after 偽元素

從 Chrome 開發者工具中檢視原始碼，可以很清楚的看到，::after 在 <div> 中，位置在該 <div> 的內容文字「"下一個"」的後面。

總結

今天最後，就來首楓橋夜泊，作為一個簡單的純文字範例作總結吧。

【查看範例 9-3】

在第 31 至 40 行，可以看到 .item 項目元素中，只有純文字。
我們來補上「正字符號」，和每一行詩的句尾補上「句號」吧。

在第 18 至 23 行，偽元素的設定，幫我們補上剛剛說的東西。

圖 c: 查看範例的偽元素位置

偽元素的使用往往就是這麼樸實無華且枯燥，但很強大！

接下來介紹的是 CSS 偽類的使用。祝大家，中秋節快樂。

文中範例可在 GitHub Page 閱讀。
原始碼可在 2022 鐵人賽專用 GitHub Repo 下載。